<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Beauty Eleven</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
    div.simpleLogo {
        padding: 32px 0px;
    }

    /*设置背景图片*/
    img.loginBackgroundImg {
        display: block;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    div.loginSmallDiv {
        background-color: white;
        position: absolute;
        right: 80px;
        top: 250px;
        width: 350px;
        /*height: 340px;*/
        padding: 60px 25px 80px 25px;
    }

    div.login_acount_text {
        color: #3C3C3C;
        font-size: 16px;
        font-weight: bold;
    }

    div.loginInput {
        border: 1px solid #CBCBCB;
        margin: 20px 0px;
    }

    div.loginInput span.loginInputIcon {
        margin: 0px;
        background-color: #CBCBCB;
        width: 40px;
        height: 40px;
        display: inline-block;
    }

    h2.glyphicon{
        /*font-size: 22px;*/
        position: relative;
        left: 9px;
        top: 9px;
        z-index: 9999;
    }

    span.loginInputIcon span.glyphicon {
        font-size: 22px;
        position: relative;
        left: 9px;
        top: 9px;
        color: #606060;
    }

    div.loginInput input {
        display: inline-block;
        border: 0px solid transparent;
        width: 254px;
        height: 37px;
        position: relative;
        left: -1px;
        top: 2px;
    }

    body {
        font-size: 12px;
        font-family: Arial;
    }

    a {
        color: #999;
    }

    a:hover {
        text-decoration: none;
        color: #C40000;
    }

    button.redButton {
        color: white;
        background-color: #C40000;
        font-size: 14px;
        font-weight: bold;
    }
</style>

<body>
<h2 class="glyphicon" style="color: #ff4900">BeautyEleven 会员管理系统</h2>

<form method="post" action="/user/login">
    <div id="loginDiv">
        <div class="simpleLogo">
            <img src="https://how2j.cn/tmall/img/site/simpleLogo.png">
        </div>
        <img th:src="@{/img/11backgroud.jpg}" class="loginBackgroundImg" id="loginBackgroundImg">
        <div class="loginSmallDiv" id="loginSmallDiv">
            <!--<div><h4><span style="color: red">Beauty Eleven</span></h4></div>-->
            <div><h4><span th:text="${flag}" style="color: red">Beauty Eleven</span></h4></div>
            <div class="login_acount_text">登录</div>
            <div class="loginInput ">
				<span class="loginInputIcon ">
					<span class=" glyphicon glyphicon-user"></span>
				</span>
                <input type="text" placeholder="手机/会员名/邮箱" required name="name" id="name">
            </div>
            <div class="loginInput ">
				<span class="loginInputIcon ">
					<span class=" glyphicon glyphicon-lock"></span>
				</span>
                <input type="password" placeholder="密码" required name="password" id="password">
            </div>
            <div>
                <a href="#nowhere" class="notImplementLink">忘记登录密码</a>
                <a class="pull-right" href="#nowhere">免费注册</a>
            </div>

            <div style="margin-top:20px">
                <button type="submit" class="btn btn-block redButton">登录</button>
            </div>

        </div>
    </div>
</form>
</body>
</html>
